 /*
 * @description: 折扣专区
 * @Author: along
 * @Date: 2021-06-15
 * @Last Modified by: along
 * @Last Modified time: 2021-06-15
 */
<template>
    <div
        class="discountLinkActive"
        @click="emitEvent(9)"
        v-if="isLoad"
    >
        <div
            class="__wrap"
            :style="{
                background: 'rgba(255, 252, 253, 1)',
                borderRadius: '8px'
            }"
        >
            <div class="__header">
                <img
                    src="https://cdn.zsdx.cn/student-app/images/active-home/link_bg.png"
                    class="__header_bg"
                >
                <div class="__header_wrap">
                    <div class="__left">
                        <p class="__nav_title">
                            学生价0-5折
                        </p>
                        <p class="__nav_desc">
                            买贵买家，双倍返还
                        </p>
                    </div>
                    <div class="__right">
                        <p class="__next">更多惊喜</p>
                        <i class="iconfont el-icon-hand-zuojiantou1"/>
                    </div>
                </div>
            </div>
            <div class="__box">
                <el-carousel
                    height="265px"
                    class="__carousel"
                    :interval="5000"
                    :autoplay="false"
                >
                    <el-carousel-item
                        v-for="(row,index) in free_list"
                        :key="index"
                        class="__carousel_item"
                        :style="{height: '265px'}"
                    >
                        <div class="__info">
                            <img
                                :src="row.goods_cover"
                                class="__info_cover"
                            >
                            <div class="__shop">
                                <p class="__shop_title">
                                    {{ row.goods_title }}
                                </p>
                                <div class="__foot">
                                    <div class="__foot_price">
                                        <p class="__foot_zero">0</p>
                                        <p class="__foot_text">元</p>
                                    </div>
                                    <div class="__foot_button">立即抢购</div>
                                </div>
                            </div>
                        </div>
                        <div class="__list">
                            <div
                                v-for="(el,key) in datalist[index]"
                                :key="key"
                                class="__items"
                            >
                                <img
                                    :src="el.goods_cover"
                                    class="__items_cover"
                                >
                                <p class="__items_title">
                                    {{ el.goods_title }}
                                </p>
                                <div class="__items_price">
                                    <p class="__items_icon">¥</p>
                                    <p class="__items_money">{{ el.has_vip_price ? el.goods_price_vip : el.goods_price }}</p>
                                </div>
                                <div class="__foot">
                                    <img
                                        v-if="!!el.goods_discount_vip"
                                        src="https://cdn.zsdx.cn/student-app/images/active-home/exp_card.png"
                                        class="__foot_logo"
                                    >
                                    <p class="__foot_price">
                                        ¥{{ el.goods_price }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DiscountLinkActive',
    props: {
        // baseconfig: {
        //     type: Object,
        //     default: () => {}
        // },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {
            // rate: '0px 0px 0px 0px',
            isLoad: false,
            discount_config: {
                sub_title: "",
                title: ""
            },
            "discount_list": [],
            "free_list": [],
            datalist: []
        };
    },
    watch: {
        //圆角单位转换
        // baseconfig:  {
        //     handler: function (val, oldVal) {
        //         let rateValue = val.style.borderRadius;

        //         this.rate = rateValue.replace(/rpx/g, 'px');
        //         this.isLoad = true;
        //     },
        //     deep: true
        // }
    },
    mounted () {
        this.isLoad = true;
        // if(JSON.stringify(this.baseconfig.style) !== '{}') {//回填圆角
        //     let rateValue = this.baseconfig.style.borderRadius;

        //     this.rate = rateValue.replace(/rpx/g, 'px');
        // }

        this.$post('/student/custom_page_for_shop_index%5Cget_data_for_app_show', {
            item_type: 9,
            data_json: JSON.stringify({})
        }, resp => {
            if(resp.code == 1){
                this.discount_config = {
                    ...resp.data.data.banner
                };
                this.discount_list = resp.data.data.discount_list;
                this.free_list = resp.data.data.free_list;
                this.initData();
            }
        });
    },
    methods: {
        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        },

        initData () {
            this.datalist = [];

            for(let i=0; i<this.free_list.length; i++) {
                this.datalist.push(this.discount_list.slice(i*3, i * 3 + 3));
            }

            // console.log('datalist', this.datalist);
        }
    }
};
</script>

<style lang="less" scoped>
.discountLinkActive {
    width: 375px;
    box-sizing: border-box;
    border: 1px #ffffff solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f2f2ff;
    .__wrap {
        width: 355px;
        height: 331px;
        box-sizing: border-box;
        // padding: 12px 0 10px 0;
        .__header {
            width: 355px;
            height: 60px;
            display: flex;
            box-sizing: border-box;
            position: relative;
            .__header_bg {
                width: 355px;
                height: 60px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 0;
            }
            .__header_wrap {
                width: 355px;
                height: 60px;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
                padding: 15px 10px 28px 10px;
                display: flex;
                justify-content: space-between;
                .__left {
                    height: 16px;
                    display: flex;
                    .__nav_title {
                        color: rgba(255, 255, 255, 1);
                        font-size: 16px;
                        font-weight: 500;
                        height: 16px;
                        line-height: 16px;
                        margin-right: 8px;
                    }
                    .__nav_desc {
                        color: rgba(255, 255, 255, 1);
                        font-size: 12px;
                        margin-top: 4px;
                    }
                }
                .__right {
                    display: flex;
                    align-items: center;
                    .__next {
                        color: rgba(255, 255, 255, 1);
                        font-size: 12px;
                    }
                    .el-icon-hand-zuojiantou1 {
                        color: #ffffff;
                        font-size: 14px;
                        font-weight: 500;
                        transform: rotate(180deg);
                    }
                }
            }
        }
        .__box {
            width: 335px;
            height: 265px;
            border-radius: 2px 2px 0 0;
            box-sizing: border-box;
            margin-top: -12px;
            margin-left: 10px;
            .__info {
                width: 335px;
                height: 86px;
                background: #FFFFFF;
                box-shadow: 0px 2px 8px 0px rgba(255,204,214,0.6);
                border-radius: 8px;
                display: flex;
                box-sizing: border-box;
                padding: 8px 10px;
                .__info_cover {
                    width: 70px;
                    height: 70px;
                    margin-right: 10px;
                }
                .__shop {
                    width: 235px;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin-top: 2px;
                    .__shop_title {
                        height: 20px;
                        width: 235px;
                        overflow: hidden;
                        color: rgba(104, 93, 93, 1);
                        font-size: 14px;
                        font-weight: bold;
                        text-overflow: ellipsis;

                        white-space: nowrap;
                    }
                    .__foot {
                        height: 28px;
                        width: 235px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .__foot_price {
                            display: flex;
                            height: 24px;
                            .__foot_zero {
                                color: rgba(249, 91, 86, 1);
                                font-size: 24px;
                                font-weight: bold;
                                height: 24px;
                                line-height: 24px;
                            }
                            .__foot_text {
                                color: rgba(249, 91, 86, 1);
                                font-size: 14px;
                                height: 14px;
                                line-height: 14px;
                                margin-top: 8px;
                            }
                        }
                        .__foot_button {
                            width: 70px;
                            height: 28px;
                            background: rgba(249, 91, 86, 1);
                            color: #ffffff;
                            border-radius: 14px;
                            font-size: 12px;
                            font-weight: bold;
                            text-align: center;
                            line-height: 28px;
                        }
                    }
                }
            }
            .__list {
                width: 335px;
                height: 167px;
                box-sizing: border-box;
                margin-top: 10px;
                display: flex;
                justify-content: space-between;
                .__items {
                    width: 105px;
                    height: 167px;
                    display: flex;
                    flex-direction: column;
                    .__items_cover {
                        width: 105px;
                        height: 105px;
                        border-radius: 5px;
                    }
                    .__items_title {
                        width: 105px;
                        height: 14px;
                        line-height: 14px;
                        color: rgba(96, 83, 83, 1);
                        font-size: 13px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin: 8px 0 6px 0;
                    }
                    .__items_price {
                        width: 105px;
                        height: 16px;
                        display: flex;
                        margin-bottom: 6px;
                        .__items_icon {
                            color: rgba(249, 91, 86, 1);
                            font-size: 10px;
                            height: 12px;
                            line-height: 12px;
                            margin-top: 2px;
                        }
                        .__items_money {
                            color: rgba(249, 91, 86, 1);
                            font-size: 14px;
                            height: 16px;
                            line-height: 16px;
                            font-weight: 500;
                        }
                    }
                    .__foot {
                        width: 105px;
                        height: 12px;
                        display: flex;
                        align-items: center;
                        .__foot_logo {
                            width: 30px;
                            // height: 12px;
                            margin-right: 4px;
                        }
                        .__foot_price {
                            color: rgba(44, 48, 60, 1);
                            font-size: 12px;
                            font-weight: 500;
                        }
                    }
                }
            }
        }
    }
}
</style>

<style lang="less">
.discountLinkActive {
    .__carousel {
        width: 345px;
        height: 265px;
        overflow: hidden;
        .__carousel_item {
            width: 345px;
            height: 265px;
        }
    }
}
</style>